@import "../../sassmixins/mixins";

body {
  overflow: hidden;
}

.container {
  background-image: url(../image/bg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  padding-top: px2rem-s(1061px);
  padding-bottom: px2rem-s(50px);

  .tong {
    position: absolute;
    left: 0;
    &.old {
      @include size(10rem, px2rem-s(472px));
      background-image: url(../image/old-youtong.png);
      background-size: 100% 100%;
      top: px2rem-s(317px);
      z-index: 10;
    }

    &.new {
      opacity: 0;
      @include size(10rem, px2rem-s(643px));
      background-image: url("../image/new-tong.png");
      background-size: 100% 100%;
      top: px2rem-s(285px);
      z-index: 9;

      .word {
        position: absolute;
        opacity: 0;
        background-size: 100% 100%;
        left: px2rem-s(46px);
        &.w-1 {
          @include size(px2rem-s(118px), px2rem-s(17px));
          background-image: url("../image/1.png");
          top: px2rem-s(66px);
        }

        &.w-2 {
          @include size(px2rem-s(118px), px2rem-s(18px));
          background-image: url("../image/2.png");
          top: px2rem-s(160px);
        }

        &.w-3 {
          @include size(px2rem-s(151px), px2rem-s(16px));
          background-image: url("../image/3.png");
          top: px2rem-s(255px);
        }

        &.w-4 {
          @include size(px2rem-s(148px), px2rem-s(18px));
          background-image: url("../image/4.png");
          top: px2rem-s(348px);
        }

        &.w-5 {
          @include size(px2rem-s(118px), px2rem-s(18px));
          background-image: url("../image/5.png");
          top: px2rem-s(440px);
        }
      }
    }
  }

  .mid {
    @include size(10rem, px2rem-s(469px));
    background-image: url(../image/mid.png);
    background-size: 100% 100%;
    position: relative;
    .click {
      position: absolute;
      &.active-1 {
        @include size(px2rem-s(566px), px2rem-s(137px));
        top: px2rem-s(124px);
        left: px2rem-s(34px);
        background-image: url("../image/lucky-btn.png");
        background-size: 100% 100%;
        animation-delay: .5s;
        -webkit-animation-delay: .5s;
      }
      &.active-2 {
        @include size(px2rem-s(575px), px2rem-s(138px));
        top: px2rem-s(384px);
        left: px2rem-s(36px);
        background-image: url("../image/fight-btn.png");
        background-size: 100% 100%;
      }
    }
  }

  .bottom {
    @include size(10rem, px2rem-s(368px));
    background-image: url("../image/bottom.png");
    background-size: 100% 100%;
    margin-top: px2rem-s(100px);

  }

  .more-btn {
    @include size(px2rem-s(312px), px2rem-s(82px));
    background-image: url("../image/more-btn.png");
    background-size: 100% 100%;
    @include center-block;
    margin-top: px2rem-s(14px);
  }

  .click-hand {
    @include size(px2rem-s(78px), px2rem-s(90px));
    background-image: url("../image/shou.png");
    background-size: 100% 100%;
    transform: translate(px2rem-s(380px), px2rem-s(350px));
    -webkit-transform: translate(px2rem-s(380px), px2rem-s(350px));
    top: 0;
    left: 0;
    position: absolute;
    z-index: 11;
  }

  .begin-word {
    @include size(px2rem-s(38px), px2rem-s(8px));
    background-image: url("../image/begin-word.png");
    background-size: 100% 100%;
    transform: translate(px2rem-s(465px), px2rem-s(380px));
    -webkit-transform: translate(px2rem-s(465px), px2rem-s(380px));
    top: 0;
    left: 0;
    position: absolute;
    z-index: 11;
  }

  .aarow {
    @include size(px2rem-s(97px), px2rem-s(36px));
    background-image: url("../image/aarow.png");
    background-size: 100% 100%;
    top: px2rem-s(924px);
    left: px2rem-s((640px - 97px) / 2);
    position: absolute;
    z-index: 11;
  }
}
